<template>
	<view class="register">
		<baseHead :showReturn="false" bg="transparent">
			<template name="1" slot="headLeft">
				<view class="flex-around" @click="guangbei">
					<u-icon name="close"></u-icon>
				</view>
			</template>
		</baseHead>
		<view style="padding: 100rpx 60rpx 20rpx; color: #030303; font-size: 46rpx; font-weight: bold;">
			验证码登录
		</view>
		<view class="content">
			<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="form1">
				<u-form-item label="" prop="username" borderBottom ref="item1">
					<view class="inuts lsdgs">
						<!-- 	<u--input v-model="userInfo.username" border="none" type="number" placeholder="请输入手机号">
							<u--text text="+86 |" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
						</u--input> -->


						<!-- #ifndef APP-NVUE -->
						<u-input v-model="userInfo.username" border="none" type="number" placeholder="请输入手机号">
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input v-model="userInfo.username" border="none" type="number" placeholder="请输入手机号">
								<!-- #endif -->
								<u--text text="+86 |" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
								<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->

					</view>
				</u-form-item>
				<u-form-item label="" prop="yzmm" borderBottom ref="item1">
					<view class="inuts lsdgs">
						<!-- #ifndef APP-NVUE -->
						<u-input v-model="userInfo.yzmm" border="none" placeholder="请输入验证码">
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input v-model="userInfo.yzmm" border="none" :adjustPosition='false' placeholder="请输入验证码">
								<!-- #endif -->
								<template slot="suffix">
									<u-button @tap="yanzhengma" :text="tips" color="linear-gradient(64deg, #008efe 0%, #2d5dff 100%)" type="success" size="mini"
										:disabled="disabled1"></u-button>
								</template>
								<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</u-form-item>
			</u--form>
			<u-button type="primary" text="登录" color="linear-gradient(64deg, #008efe 0%, #2d5dff 100%)" customStyle="margin-top: 50px" @click="register"></u-button>
			<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false">
			</u-code>
			<!-- <view class="lsdgs inuts">
				<input class="inputcss" v-model="userInfo.yzmm" placeholder="请输入验证码" />
				<text class="yzmsdgsm" @click="yanzhengma">获取验证码</text>
			</view> -->
			<!-- <view class="tetyfle inuts">
				<input class="inputcss" @blur="handleBlur" v-model="password1" password placeholder="请设置6-12位登录密码" />
			</view>
			<view class="tetyfle inuts">
				<input class="inputcss" v-model="password2" password placeholder="再次输入密码" />
			</view> -->
			<!-- <view style="margin-top:60rpx;">
				<view class="denlu_button zhuc tetyfle " @click="register">立即注册</view>
			</view> -->
			<!-- <view style="margin-top:30rpx;text-align: center; color: #B2B2B2;"  @click="guangbei">
				已有账户 立即登录
			</view> -->

		</view>
	</view>
</template>

<script>
	import baseHead from '@/pages/component/baseHead.vue'


	import {
		setTokenStorage
	} from "../../utils/token";
	const {
		getTokenStorage
	} = require("../../utils/token.js");



	const app = getApp();
	export default {
		data() {
			return {
				disabled1: false,
				title: "注册",
				userInfo: {
					username: null,
					yzmm: null,
				},
				tips: '',
				rules: {
					yzmm: {
						type: 'string',
						require: true,
						message: '请输入验证码',
						trigger: ['blur']
					},
					username: [{
							type: 'number',
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value)
							},
							message: "请输入正确的手机号",
							trigger: ['change', "blur"],
						}
					],
				}
			}
		},
		// watch:{
		// 	themeBgColor:{
		// 		handler(nVal, oVal) {
		// 			console.log(nVal);
		// 			console.log(oVal);
		// 		},
		// 		deep: true
		// 	}
		// },
		//子组件
		components: {
			baseHead
		},
		// 计算属性
		computed: {},
		// 监听页面初始化
		onInit() {},
		// 监听页面加载，其参数为上个页面传递的数据
		onLoad(option) {},
		//  启动，从后台进入前台显示  或从后一个跳转到前一个页面
		onShow() {},
		// 监听页面初次渲染完成
		onReady() {
			this.$refs.form1.setRules(this.rules)
		},
		// 监听页面隐藏
		onHide() {},
		// 监听页面卸载
		onUnload() {},
		// 创建完成立即调用
		created() {},
		// 监听窗口尺寸变化
		onResize() {},
		// 监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},
		// 页面滚动到底部的事件
		onReachBottom() {},
		// 点击 tab 时触发，参数为Object
		onTabItemTap() {},
		// 计算方法
		methods: {
			codeChange(text) {
				this.tips = text;
			},

			guangbei() {
				uni.navigateBack();
			},
			yanzhengma() {
				if (!this.userInfo.username) {
					uni.$u.toast("请输入手机号")
					return;
				}
				let email_reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
				if (email_reg.test(this.userInfo.username)) {
					let obj = {
						"PhoneNumber": this.userInfo.username,
						"Length": 4
					}
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$http.core.sendSmsCode(obj).then(res => {
							uni.hideLoading();
							uni.$u.toast(res.Message)
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast("手机号错误")
				}
			},
			register() {
				this.$refs.form1.validate().then(res => {
					let that = this;
					if (!this.userInfo.username) {
						uni.$u.toast("请输入手机号")
						return;
					}
					if (!this.userInfo.yzmm) {
						uni.$u.toast("请输入验证码")
						return;
					}

					this.$util.HrcLogin(this.userInfo.username, this.userInfo.yzmm, 1);
					
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.register {
		height: 100vh;
		// background-color: #fff;
		background-image: url("/static/image/my/loginbg.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.content {
		padding: 20rpx 60rpx;

		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;

		.inuts {
			background-color: #ffffff;
			width: 100%;
			padding: 27rpx 0rpx;
			box-sizing: border-box;

			.inputcss {
				width: 100%;
				color: #000;
				flex: 1;
				box-sizing: border-box;
			}
		}
	}

	.denlu_button {
		border: 0px solid #bfbaba;
		height: 90rpx;
		font-size: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.zhuc {
		color: #FFFFFF;
		background: linear-gradient(64deg, #008EFE 0%, #2D5DFF 100%);
	}

	.tetyfle {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.lsdgs {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
	}

	.yzmsdgsm {
		color: #2C5EFF;
		font-size: 24rpx;
		margin-right: 10rpx;
	}

	/deep/.tui-checkbox__input {
		background-color: #ffffff00 !important;
		border: 1rpx solid #D6D6D6 !important;
		border-radius: 10rpx !important;
	}
</style>